/*
 * @Author: xuchao 
 * @Date: 2018-05-16 14:30:14 
 * @Last Modified by: xuchao
 * @Last Modified time: 2018-06-29 14:20:24
 */
import React, { Component } from 'react';
import { NavLink, Link, withRouter } from 'react-router-dom';
import { Layout, Row, Col } from 'antd';
import { NavList } from './nav';

class Header extends Component {
    renderSubMenu=({ path, name, sub })=>{
        const { pathname } = this.props.location;
        return(
            <li key={ path }>
                <span className={
                    sub && sub.map(
                        item => {
                            return item.path === pathname ? 'active' : ''
                        }
                    ).indexOf('active') !== -1 ? `active` : ''
                }>{ name }</span>
                <div className="tab-dropdown">
                    <ul>
                        {
                            sub && sub.map(
                                item => this.renderMenu(item)
                            )
                        }
                    </ul>
                </div>
            </li>
        )
    }

    renderMenu=({ path, name })=>{
        const { pathname } = this.props.location;
        return (
            <li key={ path } className={ pathname === path ? 'active': '' } title={name}>
                <NavLink to={ path }>{ name }</NavLink>
            </li>    
        )
    }

    loginOut=()=>{
        if(localStorage.getItem('userInfo')){
            localStorage.removeItem('userInfo');
            this.props.history.push('/');
        }
    }

    render() {
        const { pathname } = this.props.location;
        return (
            <Layout.Header>
                <Row>
                    <Col span={3}>
                        <div className="logo">
                            <Link to="/">
                                <img src={require('@/static/images/logo.png')} alt="" />
                            </Link>
                        </div>  
                    </Col>
                    {
                        (pathname === '/login' || pathname === '/register') ?
                            <Col span={3} className="user-info">
                                <NavLink to="/">首页</NavLink>
                            </Col>
                            :
                            pathname.indexOf('/management') <= -1 ?
                                <div>
                                    <Col xxl={{ span: 18 }} xl={{ span: 17 }} className="nav">
                                        <ul>
                                            {
                                                NavList && NavList.map(
                                                    nav => nav.sub && nav.sub.length ? 
                                                        this.renderSubMenu(nav) : this.renderMenu(nav)
                                                )
                                            }
                                        </ul>
                                    </Col>
                                    {
                                        localStorage.getItem('userInfo') ?
                                            <Col xxl={{ span: 3 }} xl={{ span: 4 }} className="user-info">    
                                                <span onClick={this.loginOut.bind(this)}><i />退出</span>   
                                                <NavLink to="/management/course">您好，{JSON.parse(localStorage.getItem('userInfo')).username}</NavLink>
                                            </Col>    
                                            :
                                            <Col span={3} className="user-info">
                                                <NavLink to="/register">注册</NavLink>
                                                <NavLink to="/login">登录</NavLink>
                                            </Col> 
                                    }
                                </div>
                                :
                                <div>
                                    <Col xxl={{ span: 3 }} xl={{ span: 3 }} className="user-info">    
                                        <span onClick={this.loginOut.bind(this)}><i />退出</span>   
                                        <NavLink to="/management/course">您好，{localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')).username : ''}</NavLink>
                                    </Col> 
                                </div>
                    }
                </Row>
            </Layout.Header>
        )
    }
}

export default withRouter(Header);